<template lang="html">
  <div class="project-open">
    <div class="wrapper">
      <!-- <div class="open-left">
        <i class="icon"></i>
      </div> -->
      <div class="open-right">
        <div class="header">
          <h4 class="title" @click="toDetail">{{curProject.projectName}}</h4>
          <span class="txt"> > 公开该项目</span>
        </div>
        <div class="open-info">
          <div class="info">
            最近公开日期
            <span class="con">{{publicInfo.lastPublicTime ? new Date(publicInfo.lastPublicTime).Format("yyyy-MM-dd hh:mm") : '--'}}</span>
          </div>
          <div class="info">
            已公开
            <span class="con">{{publicInfo.publicCount}}次</span>
          </div>
        </div>
        <div class="content">
          <h4 class="title">封面图片</h4>
          <el-upload
            ref="picUploader"
            class="upload"
            :drag="drag"
            action="/gateway/fileCenter/api/file/qiniu/upload"
            :headers="uploadHeader"
            :file-list="fileList"
            :on-change="handleChange"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :before-upload="handleBeforeUpload"
            accept="image/*"
            multiple>
            <i v-show="drag" class="icon-upload"></i>
            <div v-show="drag" class="upload-txt">
              <h5 class="txt-tit">上传图片</h5>
              <p class="txt-con">支持JPEG，JPG，PNG，大小不超过3M</p>
            </div>
            <!-- <i v-show="drag" class="el-icon-upload"></i>
            <div v-show="drag" class="el-upload__text">上传图片</div> -->
          </el-upload>
        </div>
        <div class="open-task">
          <h4 class="title">公开任务</h4>
          <div class="task">
            <el-select class="task-select" no-data-text="暂无可公开的任务" v-model="openTask" multiple placeholder="选择要公开的任务">
              <el-option
                v-for="(item, index) in publicInfo.jobs"
                :key="index"
                :value="item.id"
                :label="item.codeNo">
                <span class="name">{{item.codeNo}}</span>&nbsp;&nbsp;&nbsp; <span v-show="item.jobTag">></span> &nbsp;&nbsp;&nbsp;{{item.jobTag}}
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="label">
          <h4 class="tit">标签</h4>
          <ul class="label-chosen">
            <li class="item" v-for="(item, index) in selectOpenLabel" :key="index">
              {{item.name}}
              <i class="el-icon-close item-del" @click="delLabel(item)"></i>
            </li>
          </ul>
          <el-popover
            placement="bottom-start"
            trigger="manual"
            v-model="labelVisible"
            width="800">
            <div class="navs-detail-wrapper">
              <ul class="navs-detail-left">
                <li class="item" :class="{ 'active': openAllLabelIndex == index}" v-for="(item, index) in openAllLabel" :key="index" @click="showSeLabel(index)">{{item.name}}</li>
              </ul>
              <ul class="navs-detail-right">
                <li class="items" v-for="(item, index) in openAllLabelShow" :key="index">
                  <h4 class="tit">{{item.name}}</h4>
                  <ul class="detail-items">
                    <li class="detail-item" v-for="(list, num) in item.childList" :key="num" @click="selectFilterLabel(list)">{{list.name}}</li>
                  </ul>
                </li>
              </ul>
            </div>
            <a class="label-add" slot="reference" @click="labelVisible = !labelVisible">+添加</a>
          </el-popover>
        </div>
        <div class="footer">
          <el-button class="btn" type="primary" name="button" @click="projectOpen">确认公开</el-button>
          <el-button class="btn" name="button" @click="toDetail">取消</el-button>
        </div>
      </div>
    </div>
    <div class="project-mask" v-show="labelVisible" @click="labelVisible=!labelVisible"></div>
  </div>
</template>

<script>
import store from '../../store.js'
import { mapGetters } from 'vuex'
import { getCategoryTreeByType, saveCategoryRelationList, publicProjectInfo } from '../../api/open_project.js'
import { openProject } from '../../api/project.js'
import qs from 'qs'

export default {
  data () {
    return {
      // 标签集合显示
      labelVisible: false,
      // 是否可拖拽
      drag: true,
      // 上传文件集合
      fileList: [],
      // 标签分类树信息
      openAllLabel: [],
      // 标签树分类显示
      openAllLabelShow: [],
      // 标签树分类 index
      openAllLabelIndex: 0,
      // 标签选择结果集合
      selectOpenLabel: [],
      // 项目ID
      projectId: '',
      // 文件路径
      fileId: '',
      // 公开任务集合
      openTaskOptions: [
        // {
        //   label: '#1',
        //   value: '#1 > asdada'
        // }, {
        //   label: '#2',
        //   value: '#2 > dsd'
        // }
      ],
      // 公开任务
      openTask: [],
      // 项目历史公开信息 和 任务
      publicInfo: {}
    }
  },
  methods: {
    // 项目详情页
    toDetail () {
      this.$router.push({
        'path': '/project/detail/task',
        'query': {
          'projectid': this.curProject.id
        }
      })
    },
    // 选择文件集合变化
    handleChange (file, fileList) {
      if (fileList.length > 0) {
        this.drag = false
      }
    },
    // 上传文件之前
    handleBeforeUpload (file) {
      const isImage = file.type.indexOf('image/') > -1
      const isLt3M = file.size / 1024 / 1024 < 3
      if (!isImage) {
        this.$message.error('请选择图片上传')
      }
      if (!isLt3M) {
        this.$message.error('上传头像图片大小不能超过 3MB!')
      }
      return isImage && isLt3M
    },
    // 文件删除
    handleRemove (file, fileList) {
      if (fileList.length === 0) {
        this.drag = true
      }
    },
    // 上传文件成功回调
    handleSuccess (response, file, fileList) {
      if (response.message.code === 0) {
        this.fileId = response.data.id
      }
    },
    // 标签列表选择
    showSeLabel (index) {
      this.openAllLabelIndex = index
      this.openAllLabelShow = this.openAllLabel[index].childList
    },
    // 选中标签
    selectFilterLabel (item) {
      this.labelVisible = false
      if (this.selectOpenLabel.length > 2) {
        this.$message({ message: '最多可添加三个标签', showClose: true, type: 'warning' })
      } else {
        this.selectOpenLabel.push(item)
        this.selectOpenLabel = [...new Set(this.selectOpenLabel)]
      }
    },
    // 删除选中标签
    delLabel (info) {
      this.selectOpenLabel.forEach((item, index) => {
        if (item.id === info.id) {
          this.selectOpenLabel.splice(index, 1)
        }
      })
    },
    // 公开项目
    projectOpen (str) {
      if (!this.fileId) {
        this.$message({ message: '请上传封面图片', showClose: true, type: 'warning' })
        return false
      }
      if (this.selectOpenLabel.length <= 0) {
        this.$message({ message: '请选择项目所属标签', showClose: true, type: 'warning' })
        return false
      }
      let data_ = ''
      if (str && str === 'no-path') {
        // query = `?projectId=${this.curProject.id}&fileId=`
        data_ = {
          projectId: this.curProject.id,
          fileId: ''
        }
      } else {
        // query = `?projectId=${this.curProject.id}&fileId=${this.fileId}`
        data_ = {
          projectId: this.curProject.id,
          fileId: this.fileId
        }
      }
      let categoryRelationList = []
      this.selectOpenLabel.forEach(item => {
        categoryRelationList.push({
          categoryId: item.id,
          name: item.name
        })
      })
      if (categoryRelationList.length === 0) {
        this.$message({ message: '请选择项目所属标签', showClose: true, type: 'warning' })
        return false
      }
      if (this.openTask.length === 0) {
        this.$message({ message: '请选择您要公开的任务', showClose: true, type: 'warning' })
        return false
      }
      data_.projectJobIdList = this.openTask
      openProject(data_).then(res => {
        if (res.message.code === 0) {
          let data = {
            objId: res.data.id,
            type: 1,
            categoryRelationList: categoryRelationList
          }
          saveCategoryRelationList(data).then(res => {
            if (res.message.code === 0) {
              this.$message({ message: '成功', showClose: true, type: 'success' })
              this.$router.push({ 'path': '/openproject' })
            } else {
              this.$message({ message: res.message.message, showClose: true, type: 'warning' })
            }
          })
        } else if (res.message.code === 10000) {
          this.$message({ message: '公开项目失败,文件已经存在', showClose: true, type: 'warning' })
        } else if (res.message.code === 10001) {
          this.$message({ message: '公开项目失败,请先上传代码文件', showClose: true, type: 'warning' })
        } else {
          this.$message({ message: '公开项目失败', showClose: true, type: 'warning' })
        }
      })
    },
    //  获取分类树信息
    _getCategoryTreeByType () {
      getCategoryTreeByType().then(res => {
        if (res.message.code === 0) {
          this.openAllLabel = res.data
          if (res.data.length > 0 && res.data[0].childList) this.openAllLabelShow = res.data[0].childList
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    _publicProjectInfo () {
      let data = qs.stringify({
        projectId: this.curProject.id
      })
      publicProjectInfo(data).then(res => {
        if (res.message.code === 0) {
          this.publicInfo = res.data
          this.publicInfo.jobs && this.publicInfo.jobs.map(item => {
            item.codeNo = `#${item.codeNo}`
            return item
          })
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    }
  },
  computed: {
    // 图片上传header
    uploadHeader: () => {
      let obj = {
        token: store.state.userInfo.token,
        bitaToken: store.state.userInfo.bitaToken,
        userId: store.state.userInfo.userId
      }
      return obj
    },
    ...mapGetters([
      'curProject'
    ])
  },
  mounted () {
    this._getCategoryTreeByType()
    this._publicProjectInfo()
  }
}
</script>

<style lang="stylus">
.project-open
  width 100%
  background #fff
  .wrapper
    width 1162px
    margin 0 auto
    padding: 68px 0
    padding-left 278px
    font-size 0
    position relative
    // .open-left
    //   display inline-block
    //   width 294px
    //   text-align right
    //   vertical-align top
    //   .icon
    //     display inline-block
    //     width 139px
    //     height 76px
    //     background url(../../common/image/icon-project/icon-project-setopen.png) no-repeat center
    //     background-size 139px 76px
    .open-right
      display block
      width 1162px
      .header
        padding-bottom 12px
        font-size 0
        .title
          display inline-block
          height 26px
          line-height 26px
          font-size 18px
          color #2196F3
          font-family 'PingFangSC-Medium'
          font-weight 500
          cursor pointer
        .txt
          display inline-block
          height 26px
          line-height 26px
          padding-left 10px
          font-size 18px
          color #001400
      .open-info
        padding-bottom 34px
        font-size 0
        .info
          display inline-block
          height 18px
          line-height 18px
          font-size 13px
          color #676A70
          .con
            padding-left 10px
            color #001400
        .info + .info
          padding-left 38px
      .content
        width 100%
        display flex
        .title
          flex 0 0 110px
          height 120px
          line-height 120px
          font-size 14px
          color #2D323B
          font-weight 600
        .upload
          // flex 1
          width 432px
          .el-upload-dragger
            width 432px
            height 120px
            padding 44px 0 0 82px
            background-color #F4F4F4
            border-radius 6px
            font-size 0
            .icon-upload
              display inline-block
              width 18px
              height 16px
              background url(../../common/image/icon-project/icon-upload-image.png) no-repeat center
              background-size 18px 16px
              vertical-align top
            .upload-txt
              display inline-block
              padding-left 8px
              .txt-tit
                padding-bottom 4px
                line-height 16px
                font-size 14px
                color #2D323B
                text-align left
                font-weight 500
              .txt-con
                font-size 12px
                color #2A2A2A
                line-height 20px
                text-align left
          .el-upload-list
            padding-top 34px
            width 432px
      .label
        width 100%
        padding-bottom 34px
        display flex
        .tit
          flex 0 0 110px
          height 32px
          line-height 32px
          font-size 14px
          color #2D323B
          font-weight 600
        .label-chosen
          display inline-block
          font-size 0
          vertical-align  top
          .item
            display inline-block
            height 32px
            line-height 32px
            padding 0 10px
            background #F4F4F4
            border 1px solid #CCCCCC
            border-radius 4px
            font-size 14px
            color #2D323B
            margin-right 12px
            .item-del
              font-size 14px
              color #333
              cursor pointer
         .label-add
           display inline-block
           height 32px
           line-height 32px
           padding 0 14px
           background #F4F4F4
           border 1px dashed #CCCCCC
           border-radius 4px
           font-size 14px
           color #6E6E6E
           text-decoration none
           user-select none
      .open-task
        width 100%
        padding-bottom 34px
        display flex
        .title
          flex 0 0 110px
          height 32px
          line-height 32px
          font-size 14px
          color #2D323B
          font-weight 600
        .task
          width 432px
          .task-select
            width 432px
            .el-tag
              height 26px
              padding 0 12px 0 10px
              background #F4F4F4
              border 1px solid #CCCCCC
              border-radius 4px
              .el-select__tags-text
                font-size 14px
                color #2D323B
              .el-tag__close
                top -1px
                color #7f7f7f
                background transparent
                font-size 18px
                &:hover
                  color #1f1f1f
          .name
            font-weight 600
      .footer
        width 100%
        padding-left 110px
        .btn
          width 120px
          height 40px
          font-size 14px
  .project-mask
    position fixed
    top 68px
    right 0
    bottom 0
    left 0
    z-index 11
    background transparent
.navs-detail-wrapper
  width 100%
  display flex
  .navs-detail-left
    flex 0 0 120px
    padding-top 10px
    background #f2f2f2
    .item
      height 32px
      line-height 32px
      text-indent 10px
      font-size 16px
      font-weight 600
      cursor pointer
      &:hover
        // background #d2d2d2
        color #2296f3
    .active
      color #2296f3
  .navs-detail-right
    flex 1
    padding-top 10px
    .items
      width 100%
      display flex
      .tit
        flex 0 0 140px
        height 32px
        line-height 32px
        text-align left
        padding 0 10px
        font-size 14px
        font-weight 600
      .detail-items
        flex 1
        font-size 0
        .detail-item
          display inline-block
          padding-left 6px
          padding-right 6px
          height 32px
          line-height 32px
          font-size 14px
          color #333
          cursor pointer
          &:hover
            color #2296f3
.el-select-dropdown
  .el-scrollbar
    .el-scrollbar__view.el-select-dropdown__list
      max-height 210px
      overflow-y auto
      .el-select-dropdown__item
        font-size 14px
        color #2B2B2B
        .name
          font-weight 600
          font-size 14px
          color #2D323B
      .selected
        color #2E94F9
        background #fff
        .name
          font-weight 600
          color #2E94F9
          background #fff
  .el-select-dropdown__empty
    padding 50px 0
</style>
